<!-- BaseDrawer.vue -->
<template>
  <el-drawer
    v-model="visible"
    direction="rtl"
    :size="size"
    :before-close="handleCloseTip"
    :show-close="false"
  >
    <template #header>
      <!-- 通用 header 内容 -->
      <div class="drawer-header">
        <h4>{{ title }}</h4>
        <el-space>
          <el-button v-if="isEdit" @click="handleEditCancel">取消保存</el-button>
          <el-button v-if="isEdit" type="primary" @click="handleEditSave">保存</el-button>
          <el-button v-if="!isEdit && dialogType === 'view'" type="primary" @click="handleEdit">编辑</el-button>
        </el-space>
      </div>
    </template>

    <template #default>
      <slot>
        <!-- 默认内容 -->
        <p>这里是默认内容</p>
      </slot>
    </template>

    <template v-if="dialogType !== FormTypeEnum.VIEW" #footer>
      <div class="dialog-footer">
        <el-button plain @click="closeDialog">
          取 消
        </el-button>
        <el-button :loading="loading" type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </div>
    </template>
    <template v-else #footer>
      <div class="dialog-footer">
        <el-button plain @click="closeDialog">
          关 闭
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { FormTypeEnum } from "@@/constants/other-keys";
import { ElMessageBox } from "element-plus"
import { isEqual } from 'lodash';

interface Props {
  size: number
  visible: boolean;
  title: string;
  dialogType: string;
  // 编辑前的数据
  defaultFormData: any;
  // 当前编辑数据
  formData: any;
}
const props = withDefaults(defineProps<Props>(), {
  size: 800,
  isView: true,
  isDelete: true,
  showTag: true,
  showName: true
})
const emit = defineEmits([
  'update:visible',
  // 编辑
  "handleEdit",
  // 右上角编辑保存
  'handleEditSave',
  // 关闭抽屉
  "closeDialog",
  // 取消编辑
  "handleEditCancel",
  // 下方保存按钮
  "handleConfirm"
]);
// 编辑
const isEdit = ref<boolean>(false)
const loading = ref<boolean>(false)

function closeDrawer() {
  emit("closeDialog", undefined)
}

// 关闭前校验是否有修改
function handleCloseTip(done: () => void) {
  if (props.dialogType === FormTypeEnum.VIEW && !isEdit.value) {
    closeDrawer()
    done()
    return
  }
  // 校验值是否相同
  if (isEqual(props.defaultFormData, props.formData)) {
    closeDrawer()
    done()
    return
  }
  ElMessageBox.confirm("当前编辑未保存，是否确定关闭？").then(() => {
    done()
  })
}

function handleEditSave() {
  emit('handleEditSave', {
    fn: (flag: boolean) => {
      if (flag) {
        isEdit.value = false
      }
    }
  });
}

function handleEditCancel() {
  // 取消编辑逻辑
  isEdit.value = false
  emit("handleEditCancel")
}

function handleEdit() {
  emit("handleEdit", {
    fn: (flag: boolean) => {
      if (flag) {
        isEdit.value = true
      }
    }
  })
}

function handleConfirm() {
  // 确认逻辑
  emit("handleConfirm", {
    fn: (flag: boolean) => {
      // 保存成功取消编辑状态
      if (flag) {
        emit("closeDialog", "refresh")
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>